<template>
<div style="width:1200px;margin:0 auto;overflow:hidden">
    <ul style="">
        <li :offset="1" v-for="(item,index) in data2.list" :key="index" class="goodsList">
            <el-card class="cardLists" shadow="always" style="padding:13px 0px;display:inline-block;width:225px;border-radius: 5px;overflow:hidden;height:365px;box-sizing:border-box" :data_id="item.acticle_id">
                <div class="downCodeList">
                    <img src="@/images/officalPic/downCode.png" alt="">
                </div>
                <img :src="item.image" alt="" style="width:200px;height:200px" class="goodsPic">
                <div style="font-size:14px;padding:35px 10px;">
                    <p style="text-align:left;height:40px">{{item.goods_name}}</p>
                    <div style="text-align:left;margin-top:20px">
                        <!-- <span style="vertical-align:middle;display:inline-block;width:36px;height:36px;border-radius: 50%;overflow:hidden"><img :src="item.head_ico" alt="" style="width:100%;height:100%"></span> -->
                        <span style="vertical-align:middle;color:#FF4C50">￥{{item.sell_price}}</span>
                        <span style="vertical-align:middle;color:#767676;float:right"><img src="../../images/officalPic/love.png" alt="" style="width:13px;vertical-align:middle;margin-right:5px"><span style="vertical-align:middle">{{item.popularity}}</span></span>
                    </div>
                </div>
            </el-card>
        </li>
    </ul>
</div>
    
</template>

<script>
export default {
  name: "getGoodsList",
  data() {
    return {
        
    };
  },
  props:['data2']
};
</script>

<style scoped lang="scss">
.goodsList{
    text-align:center;
    margin:10px 0;
    width:225px;
    float:left;
    margin-right:18px;
    position:relative;
}
.goodsList:nth-child(5n){
    margin-right: 0px;
}

.cardLists{
    .el-card__body{
        padding: 50px!important;
    }
    
    
}
    .downCodeList{
        position:absolute;
        opacity: 0;
        top:13px;
        left:12px;
        width:200px;
        height: 200px;
        background:rgba(0,0,0,.5); 
        cursor: pointer;
        img{
            width:124px;
            margin-top:38px;
        }
    }
    .downCodeList:hover{
        opacity: 1;
    } 

</style>
